import React, { useEffect, useState, useRef, Suspense } from 'react'
import { Layout, Menu, Avatar, Dropdown, Image, Row, Col, Spin, Modal, message } from 'antd';
import { Routes, Route, useNavigate, Navigate } from 'react-router-dom'
import CheckOrgLoginState from '../../js/CheckOrgState';
import axios from 'axios';
import { OrgInfo, DonationAgree, DoFoMeHiotory } from '../../js/AllPage'
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    EditOutlined,
    HeartOutlined,
    UserOutlined,
    LogoutOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;
export default function Index() {
    const [loginOrg, setLoginOrg] = useState(JSON.parse(localStorage.getItem("loginOrg")) || null)
    const [myId, setMyid] = useState(loginOrg?.id || null)
    const navigate = useNavigate();
    const [collapsed, setCollapsed] = useState(true);
    const [logoutVisible, setlogoutVisible] = useState(false)

    useEffect(async () => {
        message.destroy();
        if (loginOrg == null || loginOrg == "" || loginOrg == undefined) {
            navigate("/LoginAndRegister/*")
            message.error("请登入账号!")
        }
        // let checkLoginUserRs = await checkLoginState(loginUser)
        // if (checkLoginUserRs.state === "0") {
        //     localStorage.setItem("loginUser", checkLoginUserRs.loginUser)
        //     setLoginUser(JSON.parse(localStorage.getItem("loginUser")));
        //     setUserRole(loginUser.role)
        // }

        // if (checkLoginUserRs.state === "3") {
        //     localStorage.clear();
        //     message.error(checkLoginUserRs.message)
        //     navigate("/main/*")
        // }

        let checkLoginRs = await CheckOrgLoginState(loginOrg)
         if (checkLoginRs.state === "0") {
            localStorage.setItem("loginOrg", checkLoginRs.loginOrg)
            setLoginOrg(JSON.parse(localStorage.getItem("loginOrg")));
        }

        if (checkLoginRs.state === "3") {
            localStorage.clear();
            message.error(checkLoginRs.message)
            navigate("/LoginAndRegister/*")
        }
        return () => {
        };
    }, []);

    const dropdownmenu = (
        <Menu>
            <Menu.Item icon={<UserOutlined />} onClick={() => { navigate(`orgInfo/*`) }}><span>机构中心</span></Menu.Item>
            <Menu.Item danger icon={<LogoutOutlined />} onClick={() => { setlogoutVisible(true) }}><span>退出</span></Menu.Item>
        </Menu>
    );
    const togglecollapsed = () => {
        let t = collapsed;
        setCollapsed(!t)
    }
    const logout = () => {
        localStorage.clear();
        navigate("/*");
    }
    return (
        <Layout style={{ height: '100%', minHeight: '100VH' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['11']}
                    defaultOpenKeys={['sub1']}
                    style={{ height: '100%' }}
                    theme="dark"
                >
                    {/* <SubMenu key="sub1" style={{ fontWeight: '700' }} title="菜单" icon={<PicCenterOutlined />}> */}
                        <Menu.Item key="11" style={{ fontWeight: '400' }} onClick={() => { navigate(`donationAgree/*`) }} icon={<EditOutlined />}>捐赠审批</Menu.Item>
                        <Menu.Item key="12" style={{ fontWeight: '400' }} onClick={() => { navigate(`doFoMeHiotory/*`) }} icon={<HeartOutlined />}>捐赠历史</Menu.Item>
                        <Menu.Item key="13" icon={<UserOutlined />} onClick={() => { navigate(`orgInfo/*`) }}>机构中心</Menu.Item>
                    {/* </SubMenu> */}
                </Menu>
            </Sider>
            <Layout>
                <Header style={{ backgroundColor: "#FFF", display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
                    <Row align="middle">
                        <Col>
                            {
                                collapsed == true ? <a onClick={togglecollapsed}><MenuUnfoldOutlined style={{ fontSize: 20 }} /></a> : <a onClick={togglecollapsed}><MenuFoldOutlined style={{ fontSize: 20 }} /></a>
                            }
                        </Col>
                    </Row>
                    <Row align="middle">
                        <Col>
                    <Dropdown
                     overlay={dropdownmenu} 
                     arrow={true} 
                     trigger={['click']}
                    >
                        <Image
                            preview={false}
                            width={"0.4rem"}
                            height={"0.4rem"}
                            src={`http://localhost:8080/getOrgHead?id=` + myId}
                        />
                    </Dropdown>
                    </Col>
                    </Row>
                </Header>
                <Content
                    className="pageBg"
                    style={{
                        margin: `0.5%`,
                        padding: `1%`,
                        minHeight: `100%VH`,
                        backgroundColor: '#fff'
                    }}
                >
                    <Suspense fallback={<Spin size='large' />}>
                        <Routes>
                            <Route path={'*'} element={<Navigate to='donationAgree' />} />
                            <Route path='orgInfo/*' element={<OrgInfo />} />
                            <Route path='doFoMeHiotory/*' element={<DoFoMeHiotory />} />
                            <Route path='donationAgree/*' element={<DonationAgree />} />
                        </Routes>
                    </Suspense>
                </Content>
            </Layout>
            <Modal title="提示" visible={logoutVisible} onOk={logout} onCancel={() => { setlogoutVisible(false) }}>
                <p>确认要退出吗?</p>
            </Modal>
        </Layout >
    )
}